<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">添加腾讯文档</block>
		</cu-custom>
		<view v-for="(item,index) in docList" :key="index">
			<view class="cu-card shadow">
				<view class="cu-item">
					<form>
						<view class="cu-form-group flex justify-between align-center">
							<view class="flex align-center" style="width: 100%;">
								<view class="title">标题 :</view>
								<input v-model="item.title" style="font-size: 28upx;width: 100%;" placeholder="请输入文档标题"
									maxlength="32"></input>
							</view>
							<text @tap="deleteItem(index)" v-if="index>0" class="cuIcon-delete text-grey"></text>
						</view>
						<view class="cu-form-group">
							<view class="flex align-center" style="width: 100%;">
								<view class="title">链接 :</view>
								<input v-model="item.link" style="font-size: 28upx;width: 100%;" placeholder="请输入文档链接"
									maxlength="256"></input>
							</view>
						</view>
						<view class="cu-form-group">
							<view class="flex align-center" style="width: 100%;">
								<view class="title" style="min-width: 150upx;">类型 :</view>
								<radio-group @change="RadioChange" :data-id="index" class="flex justify-around align-center" style="width: 95%;">
									<view class="flex justify-start align-center">
										<radio :class="item.type=='word'?'checked':''" :checked="item.type=='word'?true:false" value="word"></radio>
										<text class="text-lg padding-left-xs">word</text>
									</view>
									<view class="flex justify-start align-center">
										<radio :class="item.type=='pdf'?'checked':''" :checked="item.type=='pdf'?true:false" value="pdf"></radio>
										<text class="text-lg padding-left-xs">pdf</text>
									</view>
									<view class="flex justify-start align-center">
										<radio :class="item.type=='excel'?'checked':''" :checked="item.type=='excel'?true:false" value="excel"></radio>
										<text class="text-lg padding-left-xs">excel</text>
									</view>
								</radio-group>
							</view>
						</view>
						<view v-if="index==docList.length-1 && docList.length < 9" @tap="addItem" class="action cu-form-group">
							<view class="action">
								<text class="cuIcon-add padding-right-xs"></text>
								<text class="text-df">添加新文档</text>
							</view>
						</view>
					</form>
				</view>
			</view>
		</view>
		<view class="action flex justify-around align-center padding-top padding-bottom" style="width: 100%;">
			<button @tap="clearDocAction" class="cu-btn round bg-grey" style="width: 40%;">清空文档</button>
			<button @tap="commitAction" :class="'cu-btn round '+themeColor" style="width: 40%;">确定添加</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				themeColor:this.ThemeColor,				
				docList: [
					{
						title:'',
						link:'',
						type:'word',
					}
				],
			}
		},
		onLoad(options) {
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			let that = this
			eventChannel.on('addDoc', function(data) {
				console.log(data)
				that.docList = data
				if(that.docList.length == 0) {
					that.docList.push({
						title:'',
						link:'',
						type:'word',
					})
				} 
			})
		},
		methods: {
			RadioChange(e) {
				let index = e.currentTarget.dataset.id
				this.docList[index].type = e.detail.value
			},
			clearDocAction() 
			{
				this.docList = []
				this.docList.push({
					title: '',
					link: '',
					type:'word'
				})
			},
			addItem() {
				this.docList.push({
					title: '',
					link: '',
					type:'word'
				})
			},
			deleteItem(index) {
				this.docList.splice(index, 1)
			},
			commitAction() {
				let isDocListEmpty = true
				let upDocList = []
				for(let i = 0;i<this.docList.length;i++){
					let item = this.docList[i]
					if(item.title.length > 0 && item.link.length > 0) {
						if(item.link.indexOf('docs.qq.com') == -1) {
							uni.showModal({
								title:'非腾讯文档链接',
								content:item.link
							})
							return
						}
						upDocList.push(item)
					}
					
				}
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('commitEvent',upDocList);
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>

</style>
